<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>学掌门Atstudy网校 - IT线上学习平台|打造精品IT职业在线教育及实战平台</title>
		<link data-n-head="ssr" rel="icon" type="image/x-icon" href="favicon.ico" />
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script src="js/jquery-3.6.1.min.js"></script>
		<script src="js/jquery.validate.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<style type="text/css">
			.table {
				margin-top: 5px;
			}

			.container-fluid {
				/* padding-left: 5px; */
				/* padding-right: 5px; */
			}

			.navbar {
				margin-bottom: 10px;
			}
		</style>
	</head>
	<body>
		<nav class="navbar navbar-default">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="#">博为峰</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li><a href="#">课程 <span class="sr-only">(current)</span></a></li>
					</ul>
				</div><!-- /.navbar-collapse -->
			</div><!-- /.container-fluid -->
		</nav>
		<div class="container-fluid">
			<div class="row">
				<div class="col-lg-12">
					<form class="form-inline">
						<div class="form-group">
							<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
							<div class="input-group">
								<input type="text" class="form-control" id="courseNameSearch" placeholder="根据课程名称搜索">
							</div>
						</div>
						<button type="button" class="btn btn-primary search">搜索</button>
						<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"
							data-whatever="@mdo">添加</button>
					</form>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-12 course">
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function getCourseList(clist) {
				if (!clist) {
					clist = localStorage.getItem("course");
					clist = JSON.parse(clist);
				}
				let table = `<table class="table table-bordered">`;
				let th = `<tr class=".active">
							<th>ID</th>
							<th>名称</th>
							<th>价格</th>
							<th>操作</th>
						</tr>`;
				let trs = ``;
				clist.forEach(function(val) {
					trs += `
							<tr class=".active">
								<td id="cid">${val.id}</td>
								<td>${val.name}</td>
								<td>${val.price}</td>
								<td><button type="button" class="btn btn-primary btn-xs edit">修改</button>
									<button type="button" class="btn btn-default btn-xs del">删除</button>
								</td>
							</tr>`;
				});
				$('.course').empty();
				$('.course').append(table + th + trs + `</table>`)
			}
			$(document).ready(function() {
				getCourseList();
				//--------------------保存------------------------------------
				$('.save').click(function() {
					let courseName = $('#courseName').val();
					let coursePrice = $('#coursePrice').val();
					let id = Math.ceil(Math.random() * 10000);
					const course = {
						id,
						name: courseName,
						price: coursePrice
					}
					//从localStorage中取课程数据(json格式字符串)
					let courseStr = localStorage.getItem("course");
					//[{"id":1,"name":"如何用等价类实现表单","price":0,"img":"7.png"},{"id":7749,"name":"html","price":"999"},{"id":3076,"name":"css","price":"666"},{"id":6301,"name":"js","price":"555"}]
					//转成数组对象
					const courseObj = JSON.parse(courseStr);
					//push
					courseObj.push(course);
					//存储到localStorage
					localStorage.setItem("course", JSON.stringify(courseObj));
					//关闭模态框
					$('#exampleModal').modal('hide');
					//重写取数据展示
					getCourseList();

				})
				//--------------------修改------------------------------------
				$(this).on('click', '.edit', function() {
					let cid = $(this).parent().siblings("#cid").html();
					//根据id从localStorage中查找(json格式字符串)
					let courseStr = localStorage.getItem("course");
					//json格式字符串-->对象
					const courseObj = JSON.parse(courseStr);
					// courseObj.forEach
					// courseObj.filter()
					const course = courseObj.find(function(val, index, array) {
						return val.id == cid
					})
					//弹出模态框(显示数据)
					$('#courseId').val(course.id);
					$('#courseNameEdit').val(course.name);
					$('#coursePriceEdit').val(course.price);
					$('#exampleModalEdit').modal('show');
				})
				//保存修改
				$('.editok').click(function() {
					let cid = $('#courseId').val();
					let name = $('#courseNameEdit').val();
					let price = $('#coursePriceEdit').val();
					//根据id从localStorage中查找(json格式字符串)
					let courseStr = localStorage.getItem("course");
					//json格式字符串-->对象
					const courseObj = JSON.parse(courseStr);
					//遍历
					courseObj.forEach(function(val) {
						if (val.id == cid) {
							val.name = name;
							val.price = price;
						}
					})
					console.log(courseObj);
					//存到localStorage
					localStorage.setItem("course", JSON.stringify(courseObj));
					//关闭模态框
					$('#exampleModalEdit').modal('hide');
					//重写加载最新数据
					getCourseList();
				})
				//--------------------删除------------------------------------
				$(this).on('click', '.del', function() {
					let cid = $(this).parent().siblings("#cid").html();
					$('#courseIdDel').val(cid);
					$('#exampleModalDel').modal('show');
				})
				//确认删除
				$('.delok').click(function() {
					//json格式字符串
					let courseStr = localStorage.getItem("course");
					//转数组对象
					let courseObj = JSON.parse(courseStr);
					//过滤
					let cid = $('#courseIdDel').val();
					courseObj = courseObj.filter(function(val) {
						return val.id != cid
					})
					//存
					localStorage.setItem("course", JSON.stringify(courseObj));
					//关闭模态框
					$('#exampleModalDel').modal('hide');
					//重写加载页面
					getCourseList();
				})
				//--------------------搜索------------------------------------
				$('.search').click(function() {
					let courseNameSearch = $('#courseNameSearch').val();
					//json格式字符串
					let courseStr = localStorage.getItem("course");
					//转数组对象
					let courseObj = JSON.parse(courseStr);
					//过滤
					courseObj = courseObj.filter(function(val) {
						return val.name.includes(courseNameSearch)
					})
					getCourseList(courseObj);
				})
			})
		</script>
		<!-- 删除模态框 -->
		<div class="modal fade" id="exampleModalDel" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">删除课程</h4>
					</div>
					<div class="modal-body">
						<input type="hidden" id="courseIdDel" />
						<p class="text-danger">确认删除此课程吗?</p>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary delok">确定</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 修改模态框 -->
		<div class="modal fade" id="exampleModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">修改课程</h4>
					</div>
					<div class="modal-body">
						<form>
							<!-- 保存要修改的课程的id 隐藏域 -->
							<input type="hidden" id="courseId" />
							<div class="form-group">
								<label for="recipient-name" class="control-label">名称:</label>
								<input type="text" class="form-control" id="courseNameEdit">
							</div>
							<div class="form-group">
								<label for="message-text" class="control-label">价格:</label>
								<input type="text" class="form-control" id="coursePriceEdit"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary editok">保存</button>
					</div>
				</div>
			</div>
		</div>

		<!-- 添加课程模态框 -->
		<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="exampleModalLabel">添加课程</h4>
					</div>
					<div class="modal-body">
						<form>
							<div class="form-group">
								<label for="recipient-name" class="control-label">名称:</label>
								<input type="text" class="form-control" id="courseName">
							</div>
							<div class="form-group">
								<label for="message-text" class="control-label">价格:</label>
								<input type="text" class="form-control" id="coursePrice"></textarea>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" class="btn btn-primary save">保存</button>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
